<template>
  <div>
    <h1>调用高德地图</h1>
    <div id="map"></div>
    <button @click="getCity">获取地址</button>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  name: 'getmap',
  data() {
    return {
      map: null,
    }
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: 'fdee14ae95b10733d9de63e8dc61e7de', // 申请好的Web端开发者Key，首次调用 load 时必填
        plugins: ['AMap.Geolocation'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map('map', {
            //设置地图容器id
            viewMode: '3D', //是否为3D地图模式
            zoom: 18, //初始化地图级别
            center: [120.02862, 30.28746], //初始化地图中心点位置
          });
          let marker = new AMap.Marker({
            position: [120.02862, 30.28746] // 基点位置
        });
        this.map.add(marker)
        })
        .catch((e) => {
          console.log(e)
        })
    },
    getCity() {
        console.log(1);
      this.map.clearMap(); 
    },
  },
  mounted() {
    this.initMap()
  },
}
</script>
<style lang="less" scoped>
#map {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>
